<template>
	<view class="container">
		<view class="head">
			<text>学习</text>
			<image src="../../static/更多.png" mode=""></image>
		</view>

		<view>
			<view v-for="(item,index) in arr" :key="index" class="itme">
				<view class="icon" :style="'background-color:'+ item.color +';'">
					<image :src="item.icon" mode=""></image>
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue'

	const arr = [{
		icon: '../../static/课程.png',
		color: '#34D057',
		title: '课程',
	}, {
		icon: '../../static/我的学习.png',
		color: '#2188FF',
		title: '我的学习'
	}, {
		icon: '../../static/笔记.png',
		color: '#7042C1',
		title: '笔记'
	}, {
		icon: '../../static/题库.png',
		color: '#40434E',
		title: '题库'
	}, {
		icon: '../../static/移动图书馆.png',
		color: '#FC8633',
		title: '移动图书馆'
	}]
</script>

<style scoped>
	.head {
		width: 92%;
		height: 100rpx;
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head text {
		font-size: 35rpx;
		color: #474747;
		font-weight: 600;
	}

	.head image {
		height: 40rpx;
		width: 40rpx;
	}

	.itme {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		width: 60rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.icon image {
		height: 35rpx;
		width: 35rpx;
	}
</style>